class Product {
  constructor(id) {
    this.rootEle = document.querySelector(id);
    this.tableEle = this.rootEle.querySelector("table");
    this.totalpriceEle = this.rootEle.querySelector(
      ".cart-list .total-price span"
    );
    this.stateAll = false;
  }
  showProduct() {
    let productListStr = localStorage.getItem("myproduct");
    let productList = JSON.parse(productListStr) || [];
    let tr = `
            <tr>
            <th><input type="checkbox"${
              this.stateAll ? "checked" : ""
            } class="stateAll">全选</th>
            <th>商品ID</th>
            <th>商品图片</th>
            <th>商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
            </tr>
             `;
    let str = productList
      .map((item) => {
        return `
                  <tr>
                  <td><input type="checkbox" ${
                    item.state == true ? "checked" : ""
                  } class="state"  data-index="${item.id}"></td>
                  <td>${item.id}</td>
                  <td><img src="${item.url}"/></td>
                  <td>${item.name}</td>
                  <td>￥${item.price}</td>
                  <td>
                    <input type="button" value="-" name="minus" data-index="${
                      item.id
                    }" ${
          item.num <= 0 ? "disabled" : ""
        }><input type="text" value="${
          item.num
        }" name="minus"><input type="button" value="+" name="plus" data-index="${
          item.id
        }" >
                  </td>
                  <td>￥${item.singlePrice}</td>
                  <td>
                  <a>移入收藏</a><br/>
                  <a class="del" data-index="${item.id}">删除</a>
                  </td>
                  </tr>
                  `;
      })
      .join("");
    tr = tr + str;
    this.tableEle.innerHTML = tr;
  }
  onProduct() {
    let that = this;
    this.tableEle.addEventListener("click", function (e) {
      e = e || window.event;
      let target = e.target;
      if (target.getAttribute("value") == "+") {
        let id = target.getAttribute("data-index");
        let productListStr = localStorage.getItem("myproduct");
        let productList = JSON.parse(productListStr);
        let product = productList.find((item) => item.id == id);
        product.num++;
        product.singlePrice = (product.num * product.price).toFixed(2);
        localStorage.setItem("myproduct", JSON.stringify(productList));
        that.showProduct();
      }
      if (target.getAttribute("value") == "-") {
        let id = target.getAttribute("data-index");
        let productListStr = localStorage.getItem("myproduct");
        let productList = JSON.parse(productListStr);
        let product = productList.find((item) => item.id == id);
        product.num--;
        product.singlePrice = product.num * product.price;
        product.singlePrice = product.singlePrice.toFixed(2);
        localStorage.setItem("myproduct", JSON.stringify(productList));
        that.showProduct();
      }
      if (target.getAttribute("class") == "del") {
        let productListStr = localStorage.getItem("myproduct");
        let productList = JSON.parse(productListStr);
        let id = target.getAttribute("data-index");
        let index = productList.findIndex((item) => item.id == id);
        productList.splice(index, 1);
        localStorage.setItem("myproduct", JSON.stringify(productList));
        that.showProduct();
      }
      if (target.getAttribute("class") == "stateAll") {
        let productListStr = localStorage.getItem("myproduct");
        let productList = JSON.parse(productListStr);
        that.stateAll = !that.stateAll;
        productList.filter((item) => (item.state = that.stateAll));
        localStorage.setItem("myproduct", JSON.stringify(productList));
        that.showProduct();
      }
      if (target.getAttribute("class") == "state") {
        let productListStr = localStorage.getItem("myproduct");
        let productList = JSON.parse(productListStr);
        let id = target.getAttribute("data-index");
        let product = productList.find((item) => item.id == id);
        product.state = !product.state;
        that.stateAll = productList.every((item) => item.state == true);
        localStorage.setItem("myproduct", JSON.stringify(productList));
        that.showProduct();
      }

      that.onToalPrice();
    });
  }
  onToalPrice() {
    let productListStr = localStorage.getItem("myproduct");
    let productList = JSON.parse(productListStr);
    productList = productList.filter((item) => item.state == true);
    let totalprice = productList.reduce(function (s, item, index) {
      return (s += Number(item.singlePrice));
    }, 0);
    totalprice = totalprice.toFixed(2);
    this.totalpriceEle.innerHTML = `￥${totalprice}`;
  }
}
